<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>统一用户授权管理系统</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<%@ include file="/include/header.jsp" %>
</head>
<body style="background-color: white;">
	<div style="padding: 10px;">
  		<div class="b_box">
        <div class="p_bar"></div>
        <div class="ch_panel" id="queryDiv">
			<form id="sysUserForm" action="post">
			    <input type="hidden" data-qname="roleId" id="roleId" value="${sysRole.roleId}" size="200"/>
				<table class="c_table">
					<tr>	
						<td width="15%" class="t_tit">
							用户名:
						</td>
						<td width="46%">
							<input type="text" name="username" data-qname="username" value=""  class="input_txt"/>
						</td>
						<td class="t_r" ><input type="button" value="查询" id="searchBtn" class="c_btn"/></td>
					</tr>
				</table>
			</form>
		</div>
		<div class="action_box m_t10">
			<span class="action_tit">角色信息:${sysRole.roleName}</span>
		</div>
		<table id="tbwrap" class="table_list"></table>
		<div class="page eui-pager-custom" id="j_pager"></div>
		</div>
	</div>
	<script type="text/html" id="tb_template">
	    <thead>
			<tr>
				<th>用户名</th>
				<th>用户中文名称</th>
			</tr>
		</thead>
		<tbody data-type="body" id="queryTable">
    		<!if(list.length>0) { !>
        		<!for(var i=0,len=list.length;i<len;i++){
            		var item = list[i],classItem = (i%2!=0)?"odd td_odd":"even";
          		!>
		    	<tr class="gradeA <!=classItem!>">
			    	<td style="border-left:2px solid #C8D1D5;"><!=item["username"]!></td>
					<td><!=item["userCnName"]!></td>
		   		</tr>
        	<!}!>
    		<!}else{!>
				<tr>
		    		<td colspan="2" style="border-left:2px solid #C8D1D5;"> 暂无数据</td>
				</tr>
    		<!}!>
 		</tbody>
	</script>
	<script type="text/javascript">
		$(function(){
			search();
		});
	
		// 5、查询
		$("#searchBtn").click(function () {
			search();
        });
	</script>
	
	<script type="text/javascript">
		
		function search() {
			// 这里放包含查询条件的DIV
			var paramData = easyUtils.getQueryDivDefault("queryDiv");
			seajs.use([ "component/table" ], function (uiTable) {
				var param = {
					url : "${ctx}/sysUser/ajaxPageByRoleId", data : paramData
				};
				easyUtils.getData(param, function (result) {
					easyUtils.buildTableCallback(result, param, uiTable, "#tbwrap", "#j_pager");
				});
			});
		}
		
	</script>
</body>
</html>